import Vue from "vue"
import VueRouter from "vue-router"

// 0. 导入Vue和VueRouter
Vue.use(VueRouter)

// 1. 定义 (路由) 组件。
import Foo from "../pages/Foo.vue"
import Bar from "../pages/Bar"
import BMI from "../pages/BMI"
import About from "../pages/About"
// import Home from "../pages/Home"
// import User from "../pages/User"
import UserPosts from "../pages/UserPosts"
import NotFound from "../pages/NotFound"
import Music from "../pages/Music.vue"
import Detail from "../pages/Detail.vue"
import FooPosts from "../pages/FooPosts.vue"
import FooProfile from "../pages/FooProfile.vue"
import FooIndex from "../pages/FooIndex.vue"
import Hr from "../pages/Hr.vue"

/*// 2. 定义路由
const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

/artist/
/artist/album
/artist/mv
/artist/simi
*/

// 3. 创建 router 实例，然后传 `routes` 配置
const router = new VueRouter({
  routes: [
    {
      path: "/home",
      // redirect: "/"
      redirect: {
        name: "Home"
      }
    },
    {
      path: '/',
      // component: Home,
      component: () => {
				return import("../pages/Home.vue")
			},
      name: "Home",
			props: () => {
				// console.log(route)
				return {
					tabbar: true
				}
			}
			// props: {
			// 	tabbar: false
			// }
    },
    {
      path: "/music",
      name: "Music",
      component: Music
    },
		{
			path: "/detail123/:singer_id",
			name: "Detail",
			component: Detail
		},
    {
      // /user/*
      path: "/user/:id",
      name: "User",
      component: () => import("../pages/User.vue"),
			props: true
			// props: false
    },
    {
      // /user/*/posts/
      // /user/7/posts/zzz
      path: "/user/:username/posts/:post_id",
      name: "UserPosts",
      component: UserPosts
    },
    { 
			path: '/foo',
			component: Foo,
			children: [
				// /foo/profile
				{ 
					path: '',
					// component: FooIndex,
					components: {
						default: FooIndex,
						hr: Hr
					},
				},
				// /foo/profile
				{ 
					path: 'profile',
					component: FooProfile,
				},
				// /foo/posts
				{ path: 'posts', component: FooPosts },
			]
		},
    // { path: '/foo/profile', component: FooProfile },
    // { path: '/foo/posts', component: FooPosts },
    { path: '/bar', component: Bar },
    { path: '/bmi', component: BMI },
    {
      path: '/about112345678',
      alias: '/about',
      name: "About",
      component: About
    },
    { path: '*', component: NotFound },
  ],
  mode: 'history'
})

export default router
/*
* {
*   path: "path",
*   component: xxx.vue
* }
* */
// 将组件 (components) 映射到路由 (routes)


